<template>
    <!-- 导航栏 -->
    <van-nav-bar left-text="" left-arrow @click-left="goBack" @click-right="isSearch = !isSearch">
        <template #right>
            <van-icon name="search" size="18" />
        </template>
        <template #title>
            <span v-if="isSearch">全部分类</span>
            <van-field v-else v-model="keywords" label="" placeholder="请输入商品名称" @update:model-value="getProductData" />
        </template>
    </van-nav-bar>
    <!-- 下拉菜单 -->
    <van-dropdown-menu swipe-threshold="4">
        <van-dropdown-item v-model="typeid" :options="typelist" @change="getProductData" />
        <van-dropdown-item v-model="flag" :options="flaglist" @change="getProductData" />
        <van-dropdown-item v-model="order" :options="orderlist" @change="getProductData" />
        <van-dropdown-item v-model="sort" :options="sortlist" @change="getProductData" />
    </van-dropdown-menu>


    <div class="mainWarp" style="background:#f3f3f3">
        <ul class="proul">
            <li v-for="item in list" :key="item.id">
                <router-link :to="{ path: '/product/info', query: { proid: item.id } }"><img
                        :src="item.thumbs_text" /></router-link>
                <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
                    <p class="tit">{{ item.name }}</p>
                </router-link>
                <div class="price">
                    <p>￥{{ item.price }}<span>￥8999</span></p>
                </div>
            </li>
        </ul>
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
    <div class="clear"></div>
    <Footer />
</template>
<script setup>
import Footer from '@/components/common/footer.vue';
const { proxy } = getCurrentInstance()
const isSearch = ref(true)
const keywords = ref('')
const typeid = ref('0')
const flag = ref('0')
const order = ref('createtime')
const sort = ref('desc')
const typelist = ref([])
const list = ref([])
const flaglist = ref([
    { text: '全部商品', value: '0' },
    { text: '新品', value: '1' },
    { text: '热销', value: '2' },
    { text: '推荐', value: '3' },
])
const orderlist = ref([
    { text: '按上架时间', value: 'createtime' },
    { text: '价格', value: 'price' },
    { text: '库存', value: 'stock' },
])
const sortlist = ref([
    { text: '降序', value: 'desc' },
    { text: '升序', value: 'asc' },
])
const goBack = () => {
    proxy.$router.go(-1)
}

onBeforeMount(() => {
    getTypeData()
    getProductData()
})
const getTypeData = async () => {
    let result = await Api.ProductType()
    if (result.code == 1) {
        typelist.value = result.data
        typelist.value.unshift({
            text: '全部分类', value: '0'
        })
    }
}
const getProductData = async () => {
    let result = await Api.ProductList({
        typeid: typeid.value,
        flag: flag.value,
        order: order.value,
        sort: sort.value,
        keywords: keywords.value
    })
    if (result.code == 1) {
        list.value = result.data
    }
}
</script>